/**
 * @description 投诉处理进度
 */
import style from './styles/Disputes.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button } from 'wd-mobile';

import { process } from "api_zhoujianyi/front/app/order/appeal";

import util from "commons/util";
let query = util.parseQueryString();

// 卖家处理原因枚举
const merchantDealStatus = {
    "NOT_DEAL": "未处理",
    "AGREE": "同意",
    "REFUSE": "拒绝"
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            detail: {},
        }
    }
    componentDidMount() {
        process({
            orderNo: this.props.match.params.orderNo
        }).then(res => {
            this.setState({
                detail: res.data
            })
        })
    }
    render() {
        return (
            <Fragment>
                <div className={style.orderNo}>
                    <span>订单号：{this.state.detail.orderNo}</span>
                </div>
                <div className={style.title}>
                    <span>处理进度</span>
                </div>
                <div className={classnames(style.process, "x-part")}>
                    <div className={classnames(style.processNode, {
                        [style.processNodeActive]: !!this.state.detail.finishTime,
                        [style.processNodeNone]: !this.state.detail.finishTime
                    })}>
                        <div className={style.processNodeTitle}><span>最终判定</span></div>
                        <div className={style.processNodeContent}>
                            {
                                !!this.state.detail.finishTime && <span>
                                    {
                                        this.state.detail.appealEffective === true ?
                                            "此次申诉经客服确认，判定为卖家责任，将在三个工作日内退款，并对卖家进行信用分扣减或封号处理，请耐心等待。如有任何异议，请在个人中心-意见反馈中告知我们，感谢您的配合。" :
                                            "此次申诉经客服确认，券码不存在质量问题，判定为买家责任，不做退款处理。如有任何异议，请在个人中心-意见反馈中告知我们，感谢您的配合。"
                                    }
                                </span>
                            }
                        </div>
                        <div className={style.processNodePoint}></div>
                        <div className={style.processNodeTime}>
                            {
                                this.state.detail.finishTime && this.state.detail.finishTime.split(" ")[0]
                            }
                            <br />
                            {
                                this.state.detail.finishTime && this.state.detail.finishTime.split(" ")[1]
                            }
                        </div>
                    </div>
                    <div className={classnames(style.processNode, {
                        [style.processNodeActive]: !this.state.detail.finishTime && !!this.state.detail.platDealTime,
                        [style.processNodeNone]: !this.state.detail.platDealTime
                    })}>
                        <div className={style.processNodeTitle}><span>客服介入</span></div>
                        <div className={style.processNodeContent}>
                            <span>
                                {merchantDealStatus[this.state.detail.platDealStatus]}
                                {
                                    this.state.detail.platDealReason ? `，${this.state.detail.platDealReason}` : ""
                                }
                            </span>
                            <div className={style.appealImage}>
                                {
                                    this.state.detail.platDealImage1 && <img src={this.state.detail.platDealImage1} alt="" />
                                }
                                {
                                    this.state.detail.platDealImage2 && <img src={this.state.detail.platDealImage2} alt="" />
                                }
                            </div>
                        </div>
                        <div className={style.processNodePoint}></div>
                        <div className={style.processNodeTime}>
                            {
                                this.state.detail.platDealTime && this.state.detail.platDealTime.split(" ")[0]
                            }
                            <br />
                            {
                                this.state.detail.platDealTime && this.state.detail.platDealTime.split(" ")[1]
                            }
                        </div>
                    </div>
                    <div className={classnames(style.processNode, {
                        [style.processNodeActive]: !this.state.detail.platDealTime && !!this.state.detail.merchantDealTime,
                        [style.processNodeNone]: !this.state.detail.merchantDealTime
                    })}>
                        <div className={style.processNodeTitle}><span>卖家自查</span></div>
                        <div className={style.processNodeContent}>
                            <span>
                                卖家自查结果：
                                {merchantDealStatus[this.state.detail.merchantDealStatus]}
                                {
                                    this.state.detail.merchantDealReason ? `，${this.state.detail.merchantDealReason}` : ""
                                }
                            </span>
                            <div className={style.appealImage}>
                                {
                                    this.state.detail.merchantDealImage1 && <img src={this.state.detail.merchantDealImage1} alt="" />
                                }
                                {
                                    this.state.detail.merchantDealImage2 && <img src={this.state.detail.merchantDealImage2} alt="" />
                                }
                            </div>
                        </div>
                        <div className={style.processNodePoint}></div>
                        <div className={style.processNodeTime}>
                            {
                                this.state.detail.merchantDealTime && this.state.detail.merchantDealTime.split(" ")[0]
                            }
                            <br />
                            {
                                this.state.detail.merchantDealTime && this.state.detail.merchantDealTime.split(" ")[1]
                            }
                        </div>
                    </div>
                    <div className={classnames(style.processNode, {
                        [style.processNodeActive]: !this.state.detail.merchantDealTime && !!this.state.detail.createTime,
                        [style.processNodeNone]: !this.state.detail.createTime
                    })}>
                        <div className={style.processNodeTitle}><span>投诉创建</span></div>
                        <div className={style.processNodeContent}>
                            <span>投诉理由：{this.state.detail.appealReason}</span>
                            <div className={style.appealImage}>
                                {
                                    this.state.detail.appealImage1 && <img src={this.state.detail.appealImage1} alt="" />
                                }
                                {
                                    this.state.detail.appealImage2 && <img src={this.state.detail.appealImage2} alt="" />
                                }
                            </div>
                        </div>
                        <div className={style.processNodePoint}></div>
                        <div className={style.processNodeTime}>
                            {
                                this.state.detail.createTime && this.state.detail.createTime.split(" ")[0]
                            }
                            <br />
                            {
                                this.state.detail.createTime && this.state.detail.createTime.split(" ")[1]
                            }
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default App;